<template>
	<nt-container>
		<view class="apply">
			<view class="apply-body__form">
				<view class="apply-body__form--item">
					<view class="apply-body__form--label required">券码</view>
					<view class="apply-body__form--input">
						<u--input placeholder="请输入券码" v-model="code" readonly></u--input>
					</view>
				</view>
				<view class="apply-body__form--item">
					<view class="apply-body__form--label required">门店</view>
					<view class="apply-body__form--input">
						<u--input placeholder="请选择门店" readonly v-model="shopName" readonly></u--input>
						<!-- <text class="iconfont">&#xe6bb;</text> -->
					</view>
				</view>
				<view class="apply-body__form--item">
					<view class="apply-body__form--label required">订单</view>
					<view class="apply-body__form--input" @tap="show = true">
						<u--input readonly v-model="orderName"></u--input>
						<text class="iconfont">&#xe6bb;</text>
					</view>
				</view>
			</view>
			<view class="apply-body__submit">
				<nt-button text="修改" @click="update"></nt-button>
			</view>
		</view>
		
		<u-picker
			:show="show" 
			ref="uPicker" 
			:columns="columns"
			@confirm="confrim"
			@close="show = false" 
			@cancel="show = false" 
			closeOnClickOverlay
		 ></u-picker>
		 
		 <u-modal
		 	:show="showTicket"
		 	title="修改验券"
		 	content="确定修改该订单验券码"
		 	confirm-text="确认"
			cancel-text="取消"
			showCancelButton
			@cancel="showTicket = false"
		 	@confirm="submit"
		 ></u-modal>
		 
	</nt-container>
</template>

<script>
import { editPayReceiptConsume, getCommonFormConfig } from "@/api"
export default {
	data(){
		return {
			show: false,
			columns: [],
			branchname: "",
			shopname: "",
			code: "",
			realorder_id: "",
			orderName: "请选择关联订单",
			showTicket: false
		}
	},
	onLoad(options){
		this.branchname = options.branchname || ""
		this.shopname = options.shopname || ""
		this.code = options.code || ""
		this.getFormConfig(options.id)
	},
	computed: {
		shopName(){
			return `${this.branchname}-${this.shopname}`
		}
	},
	methods: {
		submit(){
			editPayReceiptConsume(this.realorder_id, this.code).then(res => {
				const { data, code } = res
				if(code === 1){
					this.toast("修改成功")
					setTimeout(() => this.back(), 1000)
				}
			})
		},
		confrim(e){
			this.realorder_id = e.value[0].value
			this.orderName = e.value[0].text
			this.show = false
		},
		getFormConfig(orderId){
			getCommonFormConfig(orderId, "postEditPayReceiptConsume").then(res => {
				const { code, data } = res;
				if(code !== 1) return;
				this.columns = [data.orderPayReceiptConsumeList]
			})
		},
		update(){
			if(!this.realorder_id) return this.toast("请选择关联订单")
			this.showTicket = true
		}
	}
}
</script>

<style scoped lang="scss">
.apply{
	padding: 20rpx;
	box-sizing: border-box;
	&-body{
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		background:#fff;
		position: relative;
		z-index: 1;
		border-radius: 10rpx;
		&__form{
			background:#fff;
			&--item{
				display:flex;
				flex-direction: column;
				padding: 20rpx;
				box-sizing: border-box;
				
			}
			&--label{
				width: 140rpx;
				font-size: 32rpx;
				color:#333;
				&.required::after{
					content: "*";
					display: inline-block;
					vertical-align: middle;
					color:#f00;
				}
			}
			&--input{
				flex: 1;
				position: relative;
				margin-top: 20rpx;
				/deep/ .u-input{
					border: none !important;
					height: 90rpx;
					background:#f5f5f5;
					padding: 0 20rpx !important;
					box-sizing: border-box;
				}
				.iconfont{
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					color:#666;
					font-size: 30rpx;
				}
			}
		}
		&__submit{
			margin-top: 60rpx;
			/deep/ .button-container{
				border-radius:0;
			}
		}
	}
}
</style>